<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../css/layui.css" media="all">
		<link href="../../bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<script type="text/javascript" src="../../js/jquery.js"></script>
		<script type="text/javascript" src="../../js/jquery.form.js"></script>
		<script type="text/javascript" src="../../js/vue.min.js"></script>

	</head>

	<body>
		<div class="layui-container">

			<div class="layui-row">
				<div id="app">
					<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
						<legend>课程管理</legend>
						<div style="margin-top: 15px;">
							<a href="addCourse.html">
								<button class="layui-btn layui-btn-warm layui-btn-lg" style="margin-left: 12px;margin-bottom: 15px;">添加课程</button>
							</a>

						</div>

					</fieldset>

					<div class="layui-form">
						<form id="fm" method="post" action="http://localhost:8080/teacher/course/update.do">
							<div class="alert alert-info alert-dismissible" role="alert" style="width:600px;">
								<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<strong>注意!</strong> 权重的输入格式为1-100的整数
							</div>

							<table class="layui-table" style="text-align: center;">
								<colgroup>
									<col width="150">
									<col width="100">
									<col width="500">
									<col width="180">
								</colgroup>
								<thead>
									<tr>
										<!--<th style="text-align: center;">课程ID</th>-->
										<th style="text-align: center;">课程名</th>
										<th style="text-align: center;">权重</th>
										<th style="text-align: center;">课程描述</th>
										<th style="text-align: center;">课程操作</th>
									</tr>
								</thead>
								<tbody>
									<template v-for="(course,index) in courses">
										<tr v-if="selectId!=course.couId">
											<!--<td>{{course.couId}}</td>-->
											<td>{{course.couName}}</td>
											<td>{{course.weight}}</td>
											<td>{{course.couDes}}</td>
											<td>
												<a class="layui-btn" @click="selectId=course.couId">编辑</a>
												<a class="layui-btn" @click="calculate(course.couId,course.weight)">结算</a>
												<!--<a class="layui-btn layui-btn-danger layui-btn-xs" @click="del(course.couId)">删除</a>-->
											</td>
										</tr>
										<tr v-if="selectId==course.couId">																						
											<td><input name="couName" :value="course.couName"></td>
											<td><input name="weight" :value="course.weight"></td></td>
											<td><input name="couDes" :value="course.couDes"></td>
											<td>
												<a class="layui-btn layui-bg-orange" @click="edit()">保存</a>
												<!--<a class="layui-btn layui-btn-danger layui-btn-xs" @click="del(course.couId)">删除</a>-->
											</td>
										</tr>
									</template>

								</tbody>
							</table>
						</form>
					</div>
					<!--, page:true, id:'idTest'-->
				</div>

			</div>
		</div>
		<script src="../../js/jquery.cookie.js"></script>
		<script src="../../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src="../../layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

		<script>
			//alert($.cookie("uid"));
			$.ajax({
				type: "get",
				url: "http://localhost:8080/teacher/experiment/nothing.do",
				async: false,
				dataType: "json",
				data: {
					uid: $.cookie("uid")
				},
				success: function(data) {
					//alert(data.info);
					if(data.info == '404') {
						window.location.href = "../login/teacherlogin.html";
					}
				}
			});
			var course;
			$.ajax({
				type: "get",
				url: "http://localhost:8080/teacher/course/list.do",
				dataType: "json",
				data: {
					uid: $.cookie("uid")
				},
				async: false,
				success: function(data) {
					course = data;
				}
			});
			//console.log(course);
			var vue = new Vue({
				el: "#app",
				data: {
					courses: course,
					selectId: 0
					
				},
				methods: {
					edit: function() {
						$("#fm").ajaxSubmit({
							data: {
								couId: vue.selectId,
								uid: $.cookie("uid")
							},
							success: function(data) {
								$.ajax({
									"url": "http://localhost:8080/teacher/course/list.do",
									"async": false,
									"dataType": "json",
									data: {
										uid: $.cookie("uid")
									},
									"type": "get",
									success: function(data) {
										vue.courses = data;
									}
								});
								vue.selectId = 0;
							}
						});
					},
					del: function(id) {
						if(window.confirm("确认删除此课程及其下属实验吗?")) {
							$.ajax({
								type: "get",
								url: "http://localhost:8080/teacher/course/del.do?id=" + id,
								dataType: "json",
								data: {
									uid: $.cookie("uid")
								},
								async: false,
								success: function(data) {
									vue.courses = data;
								}
							});
							vue.selectId = 0;
						} else {

						}

					},
					calculate: function(couId, weight) {
						//alert(couId + weight);
						//判断当前课程是否有上机实验
						$.ajax({
							type: "get",
							url: "http://localhost:8080/teacher/course/hasExp.do?couId=" + couId,
							async: false,
							dataType: "json",
							data: {
								uid: $.cookie("uid")
							},
							success: function(data) {
								//alert(data.info);
								if(data.info == '404') {
									window.location.href = "../login/teacherlogin.html";
								}
								console.log(data);
								if(data == "success") {
									window.location.href = "countScore.html?couId=" + couId + "&&weight=" + weight;
								} else {
									alert("该门课程还没有添加实验课");
								}

							}
						});

					}

				}

			});
		</script>

	</body>

</html>